<template>
  <!-- 服务管理 -->
  <div class="innerPageTable-box-OneTwo value-set-list-wrap innerPageTable-out-flex">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="serviceForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item prop="title" :label="'表单名称:'" style="margin-right: 30px;">
          <Input
            type="text"
            clearable
            v-model.trim="searchForm.title"
            :placeholder="'请输入'"
            @on-enter="searchValueSet"
          ></Input>
        </Form-item>
        <Form-item prop="period" :label="'当前填报周期:'" style="width: 40%;">
          <div style="display: flex;gap: 20px;">
            <DatePicker
              type="year"
              :value="searchForm.year"
              transfer
              :clearable="true"
              @on-change="handleChange"
            ></DatePicker>
            <Cascader :data="periodList" v-model="searchForm.period" transfer></Cascader>
          </div>
        </Form-item>
        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" ref="search" @click="searchValueSet()" />
          <RPButton btnType="default" text="重置" @click="handleReset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="valueSetTable" :config="pageTableConfig"> </InnerPageTable>
  </div>
</template>

<script>
import readApi from '@/api/read.js'
import { doColumns, periodList } from './const'
import { FORM_TYPES, TODO_TYPE, FORM_STATUS } from '@/views/formConst/index.js'
import createApplyForm from '@/views/formCenter/createForm/applyForm/index.vue'
import createRateForm from '@/views/formCenter/createForm/rateForm/index.vue'

import applyWriteForm from '@/views/formCenter/writeForm/applyForm/index.vue'
import rateWriteForm from '@/views/formCenter/writeForm/rateForm/index.vue'
import MenuComp from '@/views/menuList/rating/index.vue'
import formCenterApi from '@/api/formCenter'
import { mapState } from 'vuex'
export default {
  name: 'todo',
  data() {
    return {
      searchForm: {
        title: '',
        period: [],
        year: ''
      },
      periodList: periodList,
      pageTableConfig: {
        loadDataFn: this.getServiceList.bind(this),
        columns: doColumns.bind(this)('todo'),
        autoFirst: false //默认 就是 false, 要配置在这里
      }
    }
  },
  computed: {
    ...mapState(['menuList']),
    periodTag() {
      if (!this.searchForm.year) {
        return ''
      } else if (this.searchForm.period.length !== 2 && this.searchForm.year) {
        return this.searchForm.year
      } else {
        return this.searchForm.year + '-' + this.searchForm.period[1]
      }
    }
  },
  methods: {
    async goDetail(row) {
      // todoType: 0 制表；1 表单填报；2 表单审批
      // formStatus:  1:跳转前端制表页面
      // todoType: 1 跳转前端填报页面
      setTimeout(() => {
        readApi.bpmpRefresh({ processBusinessKey: row.processBusinessKey })
      }, 3000)

      if (row.formType == FORM_TYPES['APPLY']) {
        // 申报类
        if (row.todoType == TODO_TYPE['CREATE'] && row.formStatus == FORM_STATUS['WAIT_SUBMIT']) {
          // 制表页面-驳回到待提交的
          const result = await formCenterApi.formGetById({ id: row.formId })
          new this.$sidelipPage(
            createApplyForm,
            {
              props: {
                row: result,
                id: row.formId
              }
            },
            data => {
              data && this.searchValueSet()
            }
          )
        } else if (row.todoType === TODO_TYPE['WRITE']) {
          // 填报页面
          new this.$sidelipPage(
            applyWriteForm,
            {
              props: {
                isEdit: true,
                id: row.formId,
                recordId: row.recordId
              }
            },
            data => {
              data && this.searchValueSet()
            }
          )
        } else if (
          (row.todoType == TODO_TYPE['CREATE'] && row.formStatus == FORM_STATUS['WAIT_REVIEW']) ||
          row.todoType == TODO_TYPE['APPROVAL']
        ) {
          // 制表页面-待审批 || todoType是2单据审批
          readApi.getProcessUrl({ processInstId: row.processId, taskInstId: row.taskId }).then(res => {
            window.open(res.data.data)
          })
        }
      } else if (row.formType == FORM_TYPES['RATE']) {
        if (row.todoType == TODO_TYPE['CREATE'] && row.formStatus == FORM_STATUS['WAIT_REVIEW']) {
          readApi.getProcessUrl({ processInstId: row.processId, taskInstId: row.taskId }).then(res => {
            window.open(res.data.data)
          })
        } else if (row.todoType == TODO_TYPE['CREATE'] && row.formStatus == FORM_STATUS['WAIT_SUBMIT']) {
          const result = await formCenterApi.formGetById({ id: row.formId })
          // 制表待提交
          new this.$sidelipPage(
            createRateForm,
            {
              props: {
                row: result
              }
            }
          )
        } else if (row.todoType === TODO_TYPE['WRITE']) {
          // 填报页面
          new this.$sidelipPage(
            rateWriteForm,
            {
              props: {
                isEdit: row.businessState < 2 ? true : false,
                isDetail: row.businessState > 1 ? true : false,
                row: {
                  id: row.formId,
                  recordId: row.recordId,
                  updateTime: row.endTime
                }
              }
            },
            data => {
              data && this.searchValueSet()
            }
          )
        } else if (row.todoType === TODO_TYPE['APPROVAL']) {
          const res = await formCenterApi.parentMenuPermission([row.formMenu])
          const permission = res.data.data[0].permission
          // 跳转去晋级
          new this.$sidelipPage(
            MenuComp,
            {
              props: {
                row: {
                  value: row.formMenu,
                  data: {
                    menu: row.formMenu,
                    permission,
                  }
                }
              }
            },
            data => {
              data && this.searchValueSet()
            }
          )
        }
      }
    },
    getServiceList(tableObj) {
      let { responseProcess, param } = tableObj
      let { pageNum, pageSize, title } = param
      // readState: false, //bool已读true,未读false
      // state: 1, //inter待办0,已办1
      readApi
        .getBpmpApprovalPage({
          title,
          period: this.periodTag,
          approvalState: 0,
          currentPage: pageNum,
          pageSize,
          state: 0
        })
        .then(res => {
          let { current, records, pages, total } = res.data.data
          responseProcess({
            pageNum,
            size: current,
            pages,
            records: records || [],
            total
          })
        })
    },
    handleChange(date) {
      this.searchForm.year = date
    },
    //搜索
    searchValueSet() {
      this.$refs['valueSetTable']?.load(this.searchForm)
    },
    handleReset() {
      this.$refs['serviceForm'].resetFields()
      this.searchForm.year = ''
      this.searchValueSet()
    }
  },
  mounted() {
    this.searchValueSet()
  }
}
</script>
<style lang="less" scoped>
/deep/.table-bar button:last-child {
  color: #ffffff;
  background-color: #ff6f4b;
  border-color: #ff6f4b;
}
/deep/ .self-adaption-wrap .self-adaption-flex {
  margin-bottom: 0px;
}
</style>
